import { Button, Table } from 'antd';
import { Component } from 'react';
import { exportFile } from 'table-xlsx';

import { SecondHeaderC } from '@/src/components';

// export default function TableRowColMerge() {
//   const renderContent = (value, row, index) => {
//     const obj = {
//       children: value,
//       props: {},
//     };
//     if (index === 4) {
//       obj.props.colSpan = 0;
//     }
//     return obj;
//   };
//
//   const columns = [
//     {
//       title: 'Name',
//       dataIndex: 'name',
//       render: (text, row, index) => {
//         if (index < 4) {
//           return <a>{text}</a>;
//         }
//         return {
//           children: <a>{text}</a>,
//           props: {
//             colSpan: 5,
//           },
//         };
//       },
//     },
//     {
//       title: 'Age',
//       dataIndex: 'age',
//       render: renderContent,
//     },
//     {
//       title: 'Home phone',
//       colSpan: 2,
//       dataIndex: 'tel',
//       render: (value, row, index) => {
//         const obj = {
//           children: value,
//           props: {},
//         };
//         if (index === 2) {
//           obj.props.rowSpan = 2; // 行占两个
//         }
//         // These two are merged into above cell
//         if (index === 3) {
//           obj.props.rowSpan = 0; // 行的值不渲染
//         }
//         if (index === 4) {
//           obj.props.colSpan = 0; // 列的值不渲染
//         }
//         return obj;
//       },
//     },
//     {
//       title: 'Phone',
//       colSpan: 0,
//       dataIndex: 'phone',
//       render: renderContent,
//     },
//     {
//       title: 'Address',
//       dataIndex: 'address',
//       render: renderContent,
//     },
//   ];
//
//   const dataSource = [
//     {
//       key: '1',
//       name: 'John Brown',
//       age: 32,
//       tel: '0571-22098909',
//       phone: 18889898989,
//       address: 'New York No. 1 Lake Park',
//     },
//     {
//       key: '2',
//       name: 'Jim Green',
//       tel: '0571-22098333',
//       phone: 18889898888,
//       age: 42,
//       address: 'London No. 1 Lake Park',
//     },
//     {
//       key: '3',
//       name: 'Joe Black',
//       age: 32,
//       tel: '0575-22098909',
//       phone: 18900010002,
//       address: 'Sidney No. 1 Lake Park',
//     },
//     {
//       key: '4',
//       name: 'Jim Red',
//       age: 18,
//       tel: '0575-22098909',
//       phone: 18900010002,
//       address: 'London No. 2 Lake Park',
//     },
//     {
//       key: '5',
//       name: 'Jake White',
//       age: 18,
//       tel: '0575-22098909',
//       phone: 18900010002,
//       address: 'Dublin No. 2 Lake Park',
//     },
//   ];
//
//   const onExportFileClick = () => {
//     exportFile({
//       columns,
//       dataSource,
//     });
//   };
//   return (
//     <div>
//       <Button onClick={() => onExportFileClick()}>export</Button>
//       <div>
//         <Table
//           style={{ marginTop: 20 }}
//           dataSource={dataSource}
//           columns={columns}
//           bordered
//           size="small"
//           pagination={false}
//         />
//       </div>
//     </div>
//   );
// }
export default class Test extends Component {
  renderContent = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    if (index === 4) {
      obj.props.colSpan = 0;
    }
    return obj;
  };

  getColumn = () => {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        render: (text, row, index) => {
          if (index < 4) {
            // eslint-disable-next-line jsx-a11y/anchor-is-valid
            return <a>{text}</a>;
          }
          return {
            // eslint-disable-next-line jsx-a11y/anchor-is-valid
            children: <a>{text}</a>,
            props: {
              colSpan: 5,
            },
          };
        },
      },
      {
        title: 'Age',
        dataIndex: 'age',
        render: this.renderContent,
      },
      {
        title: 'Home phone',
        // colSpan: 2,
        dataIndex: 'tel',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {},
          };
          if (index === 2) {
            obj.props.rowSpan = 2; // 行占两个
          }
          // These two are merged into above cell
          if (index === 3) {
            obj.props.rowSpan = 0; // 行的值不渲染
          }
          if (index === 4) {
            obj.props.colSpan = 0; // 列的值不渲染
          }
          return obj;
        },
      },
      {
        title: 'Phone',
        // colSpan: 0,
        dataIndex: 'phone',
        render: this.renderContent,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        render: this.renderContent,
      },
    ];
    return columns;
  };

  getData = () => {
    const dataSource = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        tel: '0571-22098909',
        phone: 18889898989,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        tel: '0571-22098333',
        phone: 18889898888,
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        tel: '0575-22098909',
        phone: 18900010002,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        key: '4',
        name: 'Jim Red',
        age: 18,
        tel: '0575-22098909',
        phone: 18900010002,
        address: 'London No. 2 Lake Park',
      },
      {
        key: '5',
        name: 'Jake White',
        age: 18,
        tel: '0575-22098909',
        phone: 18900010002,
        address: 'Dublin No. 2 Lake Park',
      },
    ];
    return dataSource;
  };

  onExportFileClick = () => {
    exportFile({
      columns: this.getColumn(),
      dataSource: this.getData(),
      fileName: '行列合并导出.xlsx', // 文件名
      raw: true,
      headerCellStyle: {
        fillFgColorRgb: 'e8efff', // header行的填充颜色
      },
    });
  };

  render() {
    return (
      <div>
        <SecondHeaderC title='行列合并导出' />
        <Button onClick={() => this.onExportFileClick()}>export</Button>
        <div>
          <Table style={{ marginTop: 20 }} dataSource={this.getData()} columns={this.getColumn()} bordered size='small' pagination={false} />
        </div>
      </div>
    );
  }
}
